<template>
  <public-modal
    width="8rem"
    :title="title"
    modalStyle="SelectUserModal"
    :publicVisible="publicVisible"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">选择日期:</div>
          <div class="input-item">
            <a-date-picker
              disabled
              v-model="value"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :allowClear="false"
              @change="datachange"
            />
          </div>
        </div>

        <!-- <div class="btn-wrap">
          <a-button
            class="searchBtn"
            @click="searchQuery(queryParam.alarmTime_begin, queryParam.alarmTime_end)"
            type="primary"
          >
            搜索
          </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
        </div> -->
      </div>

      <div class="table-wrap">
        <a-table
          rowKey="id"
          class="tableList"
          :columns="type == 1 ? columns : type == 2 ? columns2 : columns3"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template #intervalTime="records">{{ (records.intervalTime / 60).toFixed(0) }}</template>
        </a-table>
      </div>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>

<script>
import publicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'SelectUserModal',
  mixins: [JeecgListMixin],
  components: { publicModal },
  data() {
    return {
      title: '',
      value: '',
      type: '',
      loading: false,
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '预警时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'alarmTime',
          sorter: true,
        },
        {
          title: '预警结束时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'recoveryTime',
        },
        {
          title: '预警持续时间(m)',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'intervalTime' },
          // dataIndex: 'intervalTime',
        },
      ],
      columns2: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '告警时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'alarmTime',
          sorter: true,
        },
        {
          title: '告警结束时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'recoveryTime',
        },
        {
          title: '告警持续时间(m)',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'intervalTime' },
        },
      ],
      columns3: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '离线时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'alarmTime',
          sorter: true,
        },
        {
          title: '离线结束时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'recoveryTime',
        },
        {
          title: '离线持续时间(m)',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'intervalTime' },
        },
      ],
      url: {
        list: '',
      },
    }
  },
  mounted() {
    // this.value = this.$moment().subtract(1, 'day').format('YYYY-MM-DD')
    // this.datachange()
  },

  methods: {
    disabledDate(current) {
      let moment = this.$moment().subtract(1, 'day').valueOf()
      return current > moment
    },

    datachange(v) {
      let startDate = this.$moment(v).subtract(1, 'day').startOf('day').valueOf()
      // .valueOf()  .format('YYYY-MM-DD HH:mm:ss')
      let endDate = this.$moment(v).subtract(1, 'day').endOf('day').valueOf()
      // .valueOf() .format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.alarmTime_begin = startDate
      this.queryParam.alarmTime_end = endDate
    },

    show(record, type, value) {
      // console.log(value, 'value')
      // console.log(record, 'record')
      this.value = this.$moment(value).subtract(1, 'day').format('YYYY-MM-DD')
      this.datachange(value)
      this.type = type
      if (type == 1) this.title = '预警记录'
      else if (type == 2) this.title = '告警记录'
      else if (type == 3) this.title = '离线记录'
      this.queryParam.unitId = record.unitId
      // this.queryParam.deviceId = record.deviceId
      this.url.list = '/device/event_record/page?type=' + type
      this.searchQuery()
      this.publicVisible = true
    },

    searchReset() {
      if (this.queryParam.unitId) {
        let id = this.queryParam.unitId
        this.queryParam = {}
        this.queryParam.unitId = id
      } else {
        this.queryParam = {}
      }
      this.value = ''
      this.resetTime = true
      this.loadData(1)
    },
    cancel() {
      this.queryParam = {}
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 0;

  .table-wrap {
    background: #024c4e;
    padding: 0 0.2rem 0.3rem 0.2rem;
  }

  .search-group {
    background: #024c4e;
  }
}
</style>
